<%--
  Created by IntelliJ IDEA.
  User: 28400
  Date: 2023/11/23
  Time: 18:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>图书管理</title>
</head>
<style>
  *{
    margin: 0px;
    padding: 0px;
  }
</style>
<body>
<div id="selectBook">
  书名:<input type="text" name="bookName"><br>
  类型:<input type="text" name="bookType"><br>
  作者:<input type="text" name="bookWriter"><br>
  <button id="bnt">查询</button>
</div>
<table border="1px" style="able-layout:fixed;" id="myTable">
  <thead>
    <tr>
      <th>
        书名
      </th>
      <th>
        类型
      </th>
      <th>
        作者
      </th>
      <th>
        价格
      </th>
      <th>
        操作
      </th>
    </tr>
  </thead>
  <tbody>
    <c:forEach items="${books}" var="book">
      <tr>
        <td class="bookId" style="display: none">${book.bookId}</td>
        <td class="bookName">${book.bookName}</td>
        <td class="bookType">${book.bookType}</td>
        <td class="bookWriter">${book.bookWriter}</td>
        <td class="bookPrice">${book.bookPrice}</td>
        <td>
          <input class='updateBook' type='submit' value='修改'>
          <input class='deleteBook' type='submit' value='删除'>
        </td>
      </tr>
    </c:forEach>
  </tbody>
</table>
  <button id="addBook">添加</button>
</body>
<script src="js/jq.js"></script>
<script>
  //查找
  $("#bnt").click(function () {
    loadBooks()
  })

  //取消
  $(document).on("click",".cancel",function(){
    loadBooks()
  })

  //修改
  $(document).on("click",".updateBook",function(){
    let $td = $(this).parent().siblings();
    for (let i = 0;i<$td.length;i++){
      let old = $($td).eq(i).text()
      $($td).eq(i).text("")
      $($td).eq(i).append("<input type='text' value="+old+">")
    }
    $($(this)).val("确定").attr("class","over")
    $($(".over~.deleteBook")).val("取消").attr("class","cancel")
  })

  $(document).on("click",".over",function(){
    let bookInfo =[];
    //找到所有确定按钮的父节点的兄弟节点
    let $td = $(this).parent().siblings();
    /*
    * 遍历所有父节点的兄弟节点
    * 并将值以数组的形式存入
    * */
    for (let i = 0;i<$td.length;i++){
      bookInfo.push($($td).eq(i).children().val())
    }
    //存入的数组以数组下标的形式进行注入每个值
    let [bookId,bookName,bookType,bookWriter,bookPrice] = bookInfo

    $.ajax({
      url:"update",
      type:"POST",
      data:JSON.stringify({
        "bookId":bookId,
        "bookName":bookName,
        "bookType":bookType,
        "bookWriter":bookWriter,
        "bookPrice":bookPrice
    }),
    contentType:"application/json",
    success:function(data) {
      $("tbody tr").remove();
      creatTable(data);
    }
  })
})

  //删除
  $(document).on("click",".deleteBook",function(){
    $.ajax({
      url:"delete",
      type:"POST",
      data:JSON.stringify({
        "bookId":$(this).closest("tr").find(".bookId").text()
      }),
      contentType:"application/json",
      success:function(data) {
        $("tbody tr").remove();
        creatTable(data);
      }
    })
  })


  //添加
  $("#addBook").click(function () {
    let newRow = $("<tr>")
    newRow.append($("<td>").append($("<input type='text' id='newBookName' style='width:100%'>")));
    newRow.append($("<td>").append($("<input type='text' id='newBookType' style='width:100%'>")));
    newRow.append($("<td>").append($("<input type='text' id='newBookWriter' style='width:100%'>")));
    newRow.append($("<td>").append($("<input type='text' id='newBookPrice' style='width:100%'>")));
    newRow.append($("<input class='sure' type='submit' value='确定'>"),$("<input class='cancel' type='submit' value='取消'>"));
    $("#myTable").append(newRow);
  })

  $(document).on("click",".sure",function() {
      $.ajax({
        url:"addBook.ajax",
        type:"POST",
        data:JSON.stringify({
          "bookName":$('#newBookName').val(),
          "bookType":$('#newBookType').val(),
          "bookWriter":$('#newBookWriter').val(),
          "bookPrice":$('#newBookPrice').val(),
        }),
        contentType:"application/json",
        success:function(data) {
          $("tbody tr").remove();
          creatTable(data);
        }
    })
  })

  //查找
  function loadBooks(){
    $.ajax({
      url: "getSomeBooks",
      type: "POST",
      data: JSON.stringify({
        "bookName": $('#selectBook input[name="bookName"]').val(),
        "bookType": $('#selectBook input[name="bookType"]').val(),
        "bookWriter": $('#selectBook input[name="bookWriter"]').val(),
      }),
      contentType: "application/json",
      success: function (data) {
        $("tbody tr").remove();
        creatTable(data);
      }
    });
  };


  //创建方法体
  function creatTable(data) {
    for (let i = 0; i < data.length; i++) {
      let newRow = $("<tr>");
      newRow.append($("<td class='bookId' style='display: none'>").text(data[i].bookId));
      newRow.append($("<td class='bookName'>").text(data[i].bookName));
      newRow.append($("<td class='bookType'>").text(data[i].bookType));
      newRow.append($("<td class='bookWriter'>").text(data[i].bookWriter));
      newRow.append($("<td class='bookPrice'>").text(data[i].bookPrice));
      let newTd = $("<td>");
      newTd.append($("<input class='updateBook' type='submit' value='修改'>"));
      newTd.append($("<input class='deleteBook' type='submit' value='删除'>"));
      newRow.append(newTd);
      $("#myTable").append(newRow);
    }
  }
</script>
</html>
